// 指标类型管理
import style from "./index.module.css";
import { Form, Input, Button, message, Space, Table, Modal,Pagination } from 'antd';
import { ReloadOutlined, SearchOutlined,PlusOutlined,ExclamationCircleFilled } from "@ant-design/icons";
import { useStore } from './useStore';
import { useState,useEffect } from 'react';
import { AddTypeModal } from './components/addTypeModal';
import { DetailTypeModal } from './components/detailTypeModal';
// import axios from 'axios';
import { http } from "@/utils/request";
import dayjs from "dayjs";

type TableDataType = {
  code: string;
  name: string;
  createdBy: string;
  createdTime: string;
  updatedBy: string;
  updatedTime: string;
  remark: string;
}
const { confirm } = Modal;
const typeManagement = () =>{
  const [form] = Form.useForm();
  const [data,setData] = useState([
    {id:1,code:'TradeCode1',name:'费用指标',createdBy:'张三',createdTime:'2024-08-24',updatedBy:'张三',updatedTime:'2024-08-24',remark:'测试'}
  ]);
  const [pageNum,setPageNum] = useState(1);
  const [pageSize,setPageSize] = useState(10);
  const [total,setTotal] = useState();
  const columns: TableColumnsType<TableDataType> = [
    {
      title: "序号",
      key: "index",
			align:'center',
      render: (_text, _record, index) => {
        return index + 1
      }
    },
    {
      title: "类型编码",
      dataIndex: "code",
			align:'center',
    },
    {
      title: "指标类型名称",
      dataIndex: "name",
			align:'center',
    },
    {
      title: "创建人",
      dataIndex: "createdBy",
			align:'center',
    },
    {
      title: "创建时间",
			align:'center',
      render: (_, record) => {
        return (
          <>
            <span>{dayjs(record.createdTime).format('YYYY-MM-DD')}</span>
          </>
        )
      }
    },
    {
      title: "更新人",
      dataIndex: "updatedBy",
			align:'center',
    },
    {
      title: "更新时间",
      dataIndex: "updatedTime",
			align:'center',
      render: (_, record) => {
        return (
          <>
            <span>{dayjs(record.d).format('YYYY-MM-DD')}</span>
          </>
        )
      }
    },
    {
      title: "备注",
      dataIndex: "remark",
			align:'center',
    },
    {
      title: "操作",
			width:'15%',
			align:'center',
      render: (_, record) => {
        return (
          <>
            <Button type={'link'} onClick={() => {
              useStore.setState({typeDetailData:record})
              useStore.setState({detailTypeModal:{open:true}})
            }}>详情</Button>
            <Button type={'link'} onClick={()=>{
              useStore.setState({typeDetailData:record})
              useStore.setState({addOrEditTypeModal:{open:true}})
            }}>编辑</Button>
            <Button type={'link'} danger onClick={()=>{
              confirm({
                title: '提示?',
                icon: <ExclamationCircleFilled />,
                content: '此操作将永久删除该数据，是否继续?',
                cancelText:'取消',
                okText:'确定',
                onOk() {
                  delData(record.id)
                },
                onCancel() {
                  console.log('Cancel');
                },
              });
            }}>删除</Button>
          </>
        )
      }
    }
  ];
  //删除
  const delData = async(id:number) =>{
    try {
      const res = await http.get({
        url:'/pmPerformTargetType/remove',
        params:{
          typeId:id,
        }
      })
      if(res.code==200){
        message.success('删除成功!');
        getList();
      }else{
        message.error(res.msg);
      }
    } catch (errorInfo) {
      console.log(errorInfo);
    }
  }
  //新增
  const addData = () =>{
    useStore.setState({typeDetailData:{}})
    useStore.setState({addOrEditTypeModal:{open:true}})
  }
  //查询
  const onSearchHandler = () => {
    getList();
  };
  //重置
  const onResetHandler = () => {
    form.resetFields();
    getList();
  };
  //修改页码或分页大小
  const changePagination = async (page: number, size: number)=>{
    setPageNum(page);
    if(size!==pageSize){
      setPageNum(1);
    }
    setPageSize(size);
  }
  //查询接口
  const getList = async() =>{
    try {
      // const res = await axios('/api/performance/pmPerformTargetType/qryList',{params:{itemName:'',code:''}})
      const res = await http.get({
        url:'/pmPerformTargetType/qryList',
        params:{
          itemName:form.getFieldValue().itemName,
          code:form.getFieldValue().code,
          pageNum:pageNum,
          pageSize:pageSize,
        }
      })
      setData(res.rows);
      setTotal(res.total);
    } catch (errorInfo) {
      console.log(errorInfo);
    }
  }
  useEffect(()=>{
    getList()
  },[pageNum,pageSize])
  return(
    <div>
      <div className={'title'}>指标类型管理</div>
      <Form
        form={form}
        layout={'inline'}
        autoComplete="off"
      >
        <Form.Item name="code" label={'指标类型编码'} >
          <Input placeholder="请输入姓指标类型编码" />
        </Form.Item>
        <Form.Item name="itemName" label={'指标类型名称'} >
          <Input placeholder="请输入指标类型名称" />
        </Form.Item>
        <Form.Item className={'search-form-button !flex-1 text-right'}>
          <Space>
            <Button type="primary" icon={<SearchOutlined />} onClick={onSearchHandler}>
              查询
            </Button>
            <Button icon={<ReloadOutlined />} onClick={onResetHandler}>
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
      <div>
        <Button type="primary" icon={<PlusOutlined />} onClick={addData}>
          新增
        </Button>
      </div>
      <Table
        style={{marginTop:'20px'}}
        dataSource={data}
        bordered
        columns={columns}
        pagination={false}
        rowKey={(record) => `${record.id}`}
      ></Table>
      <Pagination
        className='m-[20px] text-end'
        current={pageNum}
        pageSize={pageSize}
        total={total}
        showSizeChanger
        showQuickJumper
        showTotal={(total) => `共 ${total} 条`}
        onChange={changePagination}
      />
      {/* 新增或编辑指标类型弹窗 */}
      <AddTypeModal getList={getList}/>
      {/* 指标类型详情弹窗 */}
      <DetailTypeModal/>
    </div>
  )
}
export default typeManagement;